<template>
<div>
<div class="remd_newsg">
	
		<div v-for="(item,index) in list">
		
  		<div class="m-sgitem" @click="jump(item.id)" >
  			
  			<div class="sgfr">
  				
  				<div class="sgchfl">
  					<div class="sgtl">{{item.name}}<span class="sgalia" v-if="item.song.album.alias.length>0">({{item.song.album.alias[0]}})</span></div>
  					<div class="sginfo"><i class="sghot"></i>{{ artistsName(item.song.artists)}} - {{item.song.album.name}}</div>
  				</div>
  				<div class="sgchfr">
  					<div class="sgchply"></div>
  				</div>
  				
  			</div>
  				
  		</div>
  		
  		</div>
  	
  	</div>
</div>

</template>

<script>
	export default {
		name:'musicList',
		methods:{
			artistsName(arr){
				if(arr.length==1){
					return arr[0].name;
				}else
				if(arr.length>1){
					var temp='';
					arr.forEach(function(el,index){
						if(index==arr.length-1){
							temp=temp+el.name;
						}else{
							temp=temp+el.name+'/';
						}
						
					})
					return temp;
				}
			},
			jump(id){
				this.$router.push({
					path:'/song',
					query:{id}
				})
			}
		},
		props:['list']
	}
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';

.remd_newsg{
	position: relative;
    min-height: 20px;
    text-align: left;
}
.m-sgitem{
	display: flex;
	padding-left: r(20px);
	
	.sgfr{
		flex: 1 1 auto;
		display: flex;
    	position: relative;
    	border-bottom: r(2px) solid rgba(0,0,0,.1);	
    	.sgchfl{
    		padding: r(12px) 0;
    		width: 0;
    		-webkit-box-flex: 1;
		    -webkit-flex: 1 1 auto;
		    flex: 1 1 auto;
    	}
	}
	
}
.sgtl{
	
	font-size: r(34px);
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.sginfo{
	font-size: r(24px);
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.sgchfr{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 r(20px);
    .sgchply{
    	display: inline-block;
	    width: r(44px);
	    height: r(44px);
	    
	    background: url(../../public/img/index_icon_2x.png) no-repeat;
	    background-position: r(-48px) 0;
	    background-size: r(332px) r(194px);
    }
}

</style>